<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>移动端点击小图查看大图</title>
	<script src="./lib/zepto.min.js"></script>
	<style>
		*{margin: 0;padding: 0;}
		ul,li{list-style: none;}	
		.small_img_wp li { width: 80px; height: 60px; float: left; margin-left: 10px; }
		.small_img_wp li img { width: 100%; height: 100%; }
		.ul_li:after { content: ''; display: block; clear: both; }
		.big_img_wp.show_out {display:block;}
		.big_img_wp {display: none;}
		.big_img_ul>li {width: 100%;}
		.big_img_ul>li img {width: 100%;}
		.masker {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: none;background-color: #000;}
		.masker.show {display:block;}
		#dis_none {display: none;}
	</style>
</head>
<body>
	<div class="small_img_wp">
		<ul class="ul_li">
			<li><img src="./img/1.jpg"></li>
		
			<li><img src="./img/2.jpg"></li>
		
			<li><img src="./img/3.jpg"></li>
		
			<li><img src="./img/4.jpg"></li>
		</ul>
	</div>
	<div class="big_img_wp">
		<ul class="big_img_ul">
			
		</ul>
	</div>
	<div class="masker"></div>
	<div id="dis_none">默认是display：none的，用js将其display置空试一下</div>
	<script>
		$(function() {
			$('.ul_li>li').on('click',function() {
				var $imgs=$(this).parent().find('img');
				var index=$(this).index();
				$('.masker').addClass('show');
				slider($imgs,2)
			});
			$('.masker').on('click',function() {
				$(this).toggleClass('show');
			}); 

			function slider(argus,index) {
				var tmpArr=[], len=argus.length;
				console.log(argus);
				$.each(argus,function(i,t) {
					tmpArr.push(
						'<li class="swipe"><img src='+t.src+'/></li>'
					)
				});
				$('.big_img_ul').html(tmpArr.join(''));
				// $('.big_img_ul').width().parent().addClass('show_out');

			}


			
			function pixel(url) {
				var img = new Image();
				img.src=url;
				var currW=0;
				img.onload = function() {
					currW = this.width;
					console.log(this.width,this.height);
				}
				return currW;

			}
			pixel('http://tupian.enterdesk.com/2015/lcx/1/26/9/9.jpg'); 
		})
	</script>
</body>
</html>